<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script>
        $(function () {

            //1.元素的显示和隐藏 show()  hide()
            //但是可以通过参数来设置方法的缓动效果
            //hide(时间|缓动,执行完的回调函数)
            $("input:eq(0)").click(function () {
                // $(".box").hide();
                // $(".box").show();


                //时间以毫秒计
                // $(".box").show(2000);
                /*
                slow 0.6s
                normal 0.4s
                fast 0.2s
                默认0
                */
                // $(".box").show("fast", function () {
                //     alert("操作完成");
                // });

                // $(".box").show(3000, function () {
                //     alert("操作完成");
                // });


                //toggle 判断元素显示则隐藏 隐藏则显示
                // $(".box").toggle(3000, function () { alert("ok"); })



                //2.淡入淡出 时间与上方一致
                //   $(".box").fadeIn(2000);//淡入
                //   $(".box").fadeOut(2000);//淡出

                //模拟了淡入淡出
                // $(".box").fadeToggle(3000);


                //3.滑动 高度从0-有  有-0
                // $(".box").slideDown(2000);
                // $(".box").slideUp(2000);
                // $(".box").slideToggle(2000);


                //4.动画
                // $(".box").animate({ "width": "800px", "height": "500px" }, 2000, function () {
                //     alert("动画执行完毕")
                // });

                // $(".box").animate({ "width": "800px" }, 2000).animate({ "height": "800px" }, 2000);


                $(".box")
                    .animate({ "margin-left": "800px", "opacity": "1" }, 4000)
                    .animate({ "margin-top": "300px" }, 3000)
                    .animate({ "margin-left": "10px" }, 2000)
                    .animate({ "margin-top": "20px" }, 1000);
            });




            $("input:eq(1)").click(function () {
                //默认stop停止当期执行的动画开始下一个动画
                //$(".box").stop();
                //停止所有动画 可以重新开始运行 接着上一个动画
                // $(".box").stop(true);
                //停止在当前动画的最终位置 不可重新运行
                $(".box").stop(true, true);
            });




        });


    </script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* display: none; */
            opacity: 0.1;
        }
    </style>
</head>

<body>
    <input type="button" value="点击">
    <input type="button" value="停止">
    <div class="box">内容</div>

</body>

</html>